<template>
  <div class="firstpageContent" :style="{ 'padding-top': datas.pageMargin + 'px', 'padding-bottom': datas.pageMargin + 'px'}">
    <img draggable="false" v-show="!showimageList" src="../../../../assets/img/padicon12.png" style="width: 100%" />

    <!-- 一行一个 -->
    <section class="buju buju5" v-show="datas.commodityType === 0 && showimageList">
      <div class="commodityType commodityType0" :style="{ 'background-color': datas.imageList[0].backgroundgcolor }">
        <img draggable="false" :src="datas.imageList[0].src" alt="" />
        <!-- 标题 -->
        <div class="subtitle">
          <p>{{ datas.imageList[0].name }}</p>
          <span>{{ datas.imageList[0].desc }}</span>
        </div>
        <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
      </div>
    </section>

    <!-- 一行二个 -->
    <section class="buju buju0" v-show="datas.commodityType === 1 && showimageList">
      <div
        v-for="index in 2"
        :key="index"
        class="commodityType commodityType1"
        :style="{ 'background-color': datas.imageList[index - 1].backgroundgcolor }">
        <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
        <!-- 标题 -->
        <div class="subtitle">
          <p>{{ datas.imageList[index - 1].name }}</p>
          <span>{{ datas.imageList[index - 1].desc }}</span>
        </div>
        <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
      </div>
    </section>

    <!-- 一左二右 -->
    <section class="buju" v-show="datas.commodityType === 2 && showimageList">
      <div class="commodityType commodityType3">
        <div class="rubikleft" :style="{ 'background-color': datas.imageList[0].backgroundgcolor }">
          <img draggable="false" :src="datas.imageList[0].src" alt="" />
          <!-- 标题 -->
          <div class="subtitle">
            <p>{{ datas.imageList[0].name }}</p>
            <span>{{ datas.imageList[0].desc }}</span>
          </div>
          <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
        </div>
        <div class="rubikright">
          <div
            class="imgone1"
            v-for="index in 2"
            :key="index"
            :style="{ 'background-color': datas.imageList[index].backgroundgcolor }">
            <img draggable="false" :src="datas.imageList[index].src" alt="" />
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index].name }}</p>
              <span>{{ datas.imageList[index].desc }}</span>
            </div>
            <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
      </div>
    </section>

    <!-- 二左一右 -->
    <section class="buju" v-show="datas.commodityType === 3 && showimageList">
      <div class="commodityType commodityType3">
        <div class="rubikright">
          <div class="imgone1" v-for="index in 2" :key="index">
            <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index - 1].name }}</p>
              <span>{{ datas.imageList[index - 1].desc }}</span>
            </div>
            <img class="padvip" v-show="datas.imageList[index - 1].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
        <div class="rubikleft">
          <img draggable="false" :src="datas.imageList[2].src" alt="" />
          <!-- 标题 -->
          <div class="subtitle">
            <p>{{ datas.imageList[2].name }}</p>
            <span>{{ datas.imageList[2].desc }}</span>
          </div>
          <img class="padvip" v-show="datas.imageList[2].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
        </div>
      </div>
    </section>

    <!-- 二左二右 -->
    <section class="buju buju0" v-show="datas.commodityType === 4 && showimageList">
      <div
        v-for="index in 4"
        :key="index"
        class="commodityType2 commodityType"
        :style="{ 'background-color': datas.imageList[index - 1].backgroundgcolor }">
        <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
        <!-- 标题 -->
        <div class="subtitle">
          <p>{{ datas.imageList[index - 1].name }}</p>
          <span>{{ datas.imageList[index - 1].desc }}</span>
        </div>
        <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
      </div>
    </section>

    <!-- 一左三右 -->
    <section class="buju buju4" v-show="datas.commodityType === 5 && showimageList">
      <!-- 第一张图片 -->
      <div class="commodityType commodityType4">
        <div class="rubiksCubeleft" :style="{ 'background-color': datas.imageList[0].backgroundgcolor }">
          <img draggable="false" :src="datas.imageList[0].src" alt="" />
          <!-- 标题 -->
          <div class="subtitle">
            <p>{{ datas.imageList[0].name }}</p>
            <span>{{ datas.imageList[0].desc }}</span>
          </div>
          <video class="videoss" width="231" height="130" :src="datas.imageList[0].videoUrl" :poster="datas.imageList[0].vimgurl" controls></video>
          <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
        </div>
        <div class="rubiksCuberight">
          <div
            class="conlist"
            v-for="index in 3"
            :key="index"
            :style="{ 'background-color': datas.imageList[index].backgroundgcolor }">
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index].name }}</p>
              <span>{{ datas.imageList[index].desc }}</span>
            </div>
            <img draggable="false" :src="datas.imageList[index].src" alt="" />
            <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
      </div>
    </section>

    <!-- 三左一右 -->
    <section class="buju buju4" v-show="datas.commodityType === 6 && showimageList">
      <div class="commodityType commodityType4">
        <div class="rubiksCuberight">
          <div class="conlist" v-for="index in 3" :key="index">
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index - 1].name }}</p>
              <span>{{ datas.imageList[index - 1].desc }}</span>
            </div>
            <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
            <img class="padvip" v-show="datas.imageList[index - 1].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
        <!-- 第一张图片 -->
        <div class="rubiksCubeleft">
          <img draggable="false" :src="datas.imageList[3].src" alt="" />
          <!-- 标题 -->
          <div class="subtitle">
            <p>{{ datas.imageList[3].name }}</p>
            <span>{{ datas.imageList[3].desc }}</span>
          </div>
          <img class="padvip" v-show="datas.imageList[3].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
        </div>
      </div>
    </section>

    <!-- 二左三右 -->
    <section class="buju buju4" v-show="datas.commodityType === 7 && showimageList">
      <!-- 第一张图片 -->
      <div class="commodityType commodityType8">
        <div class="rubiksCubeleft">
          <div
            v-for="index in 2"
            :key="index"
            class="rubiksCubeTypeleft"
            :style="{ 'background-color': datas.imageList[index - 1].backgroundgcolor }">
            <img :src="datas.imageList[index - 1].src" alt="" />
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index - 1].name }}</p>
              <span>{{ datas.imageList[index - 1].desc }}</span>
            </div>
            <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
        <div class="rubiksCuberight">
          <div
            class="rubiksCubeTyperight"
            v-for="index in 3"
            :key="index"
            :style="{ 'background-color': datas.imageList[index + 1].backgroundgcolor }">
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index + 1].name }}</p>
              <span>{{ datas.imageList[index + 1].desc }}</span>
            </div>
            <img draggable="false" :src="datas.imageList[index + 1].src" alt="" />
            <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
      </div>
    </section>

    <!-- 三左二右 -->
    <section class="buju buju4" v-show="datas.commodityType === 8 && showimageList">
      <!-- 第一张图片 -->
      <div class="commodityType commodityType8">
        <div class="rubiksCuberight">
          <div
            class="rubiksCubeTyperight"
            v-for="index in 3"
            :key="index"
            :style="{ 'background-color': datas.imageList[index - 1].backgroundgcolor }">
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index - 1].name }}</p>
              <span>{{ datas.imageList[index - 1].desc }}</span>
            </div>
            <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
            <img class="padvip" v-show="datas.imageList[index - 1].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
        <div class="rubiksCubeleft">
          <div
            v-for="index in 2"
            :key="index"
            class="rubiksCubeTypeleft"
            :style="{ 'background-color': datas.imageList[index - 1].backgroundgcolor }">
            <img :src="datas.imageList[index + 2].src" alt="" />
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index + 2].name }}</p>
              <span>{{ datas.imageList[index + 2].desc }}</span>
            </div>
            <img class="padvip" v-show="datas.imageList[index + 2].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
      </div>
    </section>

    <!-- 二左三右2 -->
    <section class="buju buju4" v-show="datas.commodityType === 9 && showimageList">
      <!-- 第一张图片 -->
      <div class="commodityType commodityType9">
        <div class="rubiksCubeleft">
          <div
            v-for="index in 2"
            :key="index"
            class="rubiksCubeTypeleft"
            :style="{ 'background-color': datas.imageList[index - 1].backgroundgcolor }">
            <img :src="datas.imageList[index - 1].src" alt="" />
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index - 1].name }}</p>
              <span>{{ datas.imageList[index - 1].desc }}</span>
            </div>
            <!-- {{ index }} -->
            <video v-show="index === 1" class="videoss" width="231" height="130" :src="datas.imageList[index - 1].videoUrl" :poster="datas.imageList[index - 1].vimgurl" controls></video>
            <img class="padvip" v-show="datas.imageList[index - 1].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
        <div class="rubiksCuberight">
          <div
            class="rubiksCubeTyperight"
            v-for="index in 3"
            :key="index"
            :style="{ 'background-color': datas.imageList[index + 1].backgroundgcolor }">
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index + 1].name }}</p>
              <span>{{ datas.imageList[index + 1].desc }}</span>
            </div>
            <img draggable="false" :src="datas.imageList[index + 1].src" alt="" />
            <img class="padvip" v-show="datas.imageList[index + 1].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
      </div>
    </section>

    <!-- 三左二右2 -->
    <section class="buju buju4" v-show="datas.commodityType === 10 && showimageList">
      <!-- 第一张图片 -->
      <div class="commodityType commodityType9">
        <div class="rubiksCuberight">
          <div
            class="rubiksCubeTyperight"
            v-for="index in 3"
            :key="index"
            :style="{ 'background-color': datas.imageList[index - 1].backgroundgcolor }">
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index - 1].name }}</p>
              <span>{{ datas.imageList[index - 1].desc }}</span>
            </div>
            <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
            <img class="padvip" v-show="datas.imageList[index - 1].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
        <div class="rubiksCubeleft">
          <div
            v-for="index in 2"
            :key="index"
            class="rubiksCubeTypeleft"
            :style="{ 'background-color': datas.imageList[index + 2].backgroundgcolor }">
            <img :src="datas.imageList[index + 2].src" alt="" />
            <!-- 标题 -->
            <div class="subtitle">
              <p>{{ datas.imageList[index + 2].name }}</p>
              <span>{{ datas.imageList[index + 2].desc }}</span>
            </div>
            <img class="padvip" v-show="datas.imageList[index + 2].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
          </div>
        </div>
      </div>
    </section>

    <!-- 三左三右 -->
    <section class="buju buju0" v-show="datas.commodityType === 11 && showimageList">
      <div
        v-for="index in 6"
        :key="index"
        class="commodityType7 commodityType"
        :style="{ 'background-color': datas.imageList[index - 1].backgroundgcolor }">
        <!-- 标题 -->
        <div class="subtitle">
          <p>{{ datas.imageList[index - 1].name }}</p>
          <span>{{ datas.imageList[index - 1].desc }}</span>
        </div>
        <img draggable="false" :src="datas.imageList[index - 1].src" alt="" />
        <img class="padvip" v-show="datas.imageList[0].isVipShow" src="../../../../assets/images/vip-pad.png" alt="">
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: "firstpageContent",
  props: {
    datas: Object,
  },
  computed: {
    showimageList() {
      if (this.datas.commodityType === 0 && !this.datas.imageList[0].src) return false;
      if (
        this.datas.commodityType === 1 &&
        !this.datas.imageList[0].src &&
        !this.datas.imageList[1].src
      )
        return false;

      if (
        (this.datas.commodityType === 3 || this.datas.commodityType === 5) &&
        !this.datas.imageList[0].src &&
        !this.datas.imageList[1].src &&
        !this.datas.imageList[2].src
      )
        return false;

      if (
        (this.datas.commodityType === 2 || this.datas.commodityType === 4 || this.datas.commodityType === 6) &&
        !this.datas.imageList[0].src &&
        !this.datas.imageList[1].src &&
        !this.datas.imageList[2].src &&
        !this.datas.imageList[3].src
      )
        return false;
      if (
        this.datas.commodityType === 7 &&
        !this.datas.imageList[0].src &&
        !this.datas.imageList[1].src &&
        !this.datas.imageList[2].src &&
        !this.datas.imageList[3].src &&
        !this.datas.imageList[4].src &&
        !this.datas.imageList[5].src
      )
        return false;
      if (
        (this.datas.commodityType === 8 || this.datas.commodityType === 9 || this.datas.commodityType === 10 || this.datas.commodityType === 11) &&
        !this.datas.imageList[0].src &&
        !this.datas.imageList[1].src &&
        !this.datas.imageList[2].src &&
        !this.datas.imageList[3].src &&
        !this.datas.imageList[4].src
      )
        return false;
      return true;
    },
  },
};
</script>

<style scoped lang="scss">
.firstpageContent {
  position: relative;
  /* 布局 */
  .imgone {
    &:last-of-type {
      margin-bottom: 0 !important;
      img {
        padding-bottom: 0 !important;
        padding-right: 0 !important;
      }
    }
    &:first-of-type {
      img {
        padding-top: 0 !important;
        padding-right: 0 !important;
      }
    }
  }
  .imgtow {
    position: relative;
    &:first-of-type {
      img {
        padding-bottom: 0 !important;
        padding-left: 0 !important;
      }
    }
    &:last-of-type {
      img {
        padding-bottom: 0 !important;
        padding-right: 0 !important;
      }
    }
  }
  .hw {
    width: 100%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .buju {
    &.buju0 {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    &.buju4 {
      display: flex;
      width: 100%;
      flex-direction: row;
      justify-content: space-around;
    }
    .active {
      background: #e0edff;
      border: 1px solid #155bd4;
      color: #155bd4;
      z-index: 2;
    }
    .commodityType {
      cursor: pointer;
      &.commodityType0 {
        width: 100%;
        height: 364px;
        // background:linear-gradient(180deg, #08967C 0%, #07816F 100%);
        border-radius: 10px;
        position: relative;
        img {
          width: 100%;
          height: 364px;
          display: block;
          border-radius: 14px;
          position: relative;
        }
        .subtitle {
          position: absolute;
          top: 35px;
          left: 0;
          right: 0;
          p {
            font-size: 16px;
            font-weight: bold;
            line-height: 10px;
            color: #260C70;
          }
          span {
            font-size: 12px;
            color: #260C70;
          }
        }
        .padvip{
          position: absolute;
          top: 0;
          right: 0;
          width: 44px;
          height: 44px;
        }
      }
      &.commodityType1 {
        width: 48%;
        height: 364px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
        .subtitle {
          position: absolute;
          top: 35px;
          left: 0;
          right: 0;
          p {
            font-size: 16px;
            font-weight: bold;
            line-height: 10px;
            color: #260C70;
          }
          span {
            font-size: 12px;
            color: #260C70;
          }
        }
        .padvip{
          position: absolute;
          top: 0;
          right: 0;
          width: 44px;
          height: 44px;
        }
      }
      &.commodityType2 {
        width: 48%;
        height: 173px;
        margin-bottom: 10px;
        position: relative;
        border-radius: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
        .subtitle {
          position: absolute;
          top: 35px;
          left: 15px;
          p {
            font-size: 16px;
            font-weight: bold;
            line-height: 10px;
            color: #260C70;
          }
          span {
            font-size: 12px;
            color: #260C70;
          }
        }
        .padvip{
          position: absolute;
          top: 0;
          right: 0;
          width: 44px;
          height: 44px;
        }
      }
      &.commodityType3 {
        display: flex;
        justify-content: space-between;
        .rubikleft {
          width: 48%;
          height: 364px;
          margin-right: 10px;
          border-radius: 10px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            display: block;
            position: relative;
            border-radius: 10px;
          }
          .subtitle {
            position: absolute;
            top: 35px;
            left: 0;
            right: 0;
            p {
              font-size: 16px;
              font-weight: bold;
              line-height: 10px;
              color: #260C70;
            }
            span {
              font-size: 12px;
              color: #260C70;
            }
          }
          .padvip{
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 44px;
          }
        }
        .rubikright {
          width: 48%;
          .imgone1 {
            height: 173px;
            margin-bottom: 18px;
            position: relative;
            &:nth-of-type(2) {
              margin-bottom: 0 !important;
            }
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
            .subtitle {
              position: absolute;
              top: 35px;
              left: 15px;
              p {
                font-size: 16px;
                font-weight: bold;
                line-height: 10px;
                color: #260C70;
              }
              span {
                font-size: 12px;
                color: #260C70;
              }
            }
            .padvip{
              position: absolute;
              top: 0;
              right: 0;
              width: 44px;
              height: 44px;
            }
          }
        }
      }
      &.commodityType4 {
        // position:relative;
        display: flex;
        justify-content: space-between;
        width:100%;
        .rubiksCubeleft {
          width: 48%;
          height: 364px;
          position:relative;
          img {
            width: 100%;
            height: 364px;
            display: block;
            border-radius: 10px;
          }
          .subtitle {
            position: absolute;
            top: 35px;
            left: 0;
            right: 0;
            p {
              font-size: 16px;
              font-weight: bold;
              line-height: 10px;
              color: #260C70;
            }
            span {
              font-size: 12px;
              color: #260C70;
            }
          }
          .videoss{
            position: absolute;
            top: 115px;
            left: 10%;
            // right: 0;
          }
          .padvip{
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 44px;
          }
        }
        .rubiksCuberight {
          width: 48%;
          .conlist {
            display: flex;
            justify-content: space-between;
            // background: linear-gradient(180deg, #08967c 0%, #07816f 100%);
            border-radius: 10px;
            // width: 302px;
            height: 112px;
            position: relative;
            margin-bottom: 12px;
            &:nth-of-type(3) {
              margin-bottom: 0 !important;
            }
            img {
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 10px;
            }
            .subtitle {
              position: absolute;
              top: 15px;
              left: 15px;
              p {
                font-size: 16px;
                font-weight: bold;
                line-height: 10px;
                color: #260C70;
              }
              span {
                font-size: 12px;
                color: #260C70;
              }
            }
            .padvip{
              position: absolute;
              top: 0;
              right: 0;
              width: 44px;
              height: 44px;
            }
          }
        }
      }
      &.commodityType7 {
        width: 48%;
        height: 112px;
        margin-bottom: 16px;
        position: relative;
        display: flex;
        justify-content: space-between;
        &:nth-of-type(5) {
          margin-bottom: 0 !important;
        }
        &:nth-of-type(6) {
          margin-bottom: 0 !important;
        }
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
          display: block;
        }
        .subtitle {
          position: absolute;
          top: 15px;
          left: 15px;
          p {
            font-size: 16px;
            font-weight: bold;
            line-height: 10px;
            color: #260C70;
          }
          span {
            font-size: 12px;
            color: #260C70;
          }
        }
        .padvip{
          position: absolute;
          top: 0;
          right: 0;
          width: 44px;
          height: 44px;
        }
      }
      &.commodityType8 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        .rubiksCubeleft {
          width: 48%;
          .rubiksCubeTypeleft {
            height: 173px;
            border-radius: 10px;
            margin-bottom: 10px;
            position: relative;
            &:nth-of-type(2) {
              margin-bottom: 0 !important;
            }
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
            .subtitle {
              position: absolute;
              top: 15px;
              left: 15px;
              p {
                font-size: 16px;
                font-weight: bold;
                line-height: 10px;
                color: #260C70;
              }
              span {
                font-size: 12px;
                color: #260C70;
              }
            }
            .padvip{
              position: absolute;
              top: 0;
              right: 0;
              width: 44px;
              height: 44px;
            }
          }
        }
        .rubiksCuberight {
          width: 48%;
          .rubiksCubeTyperight {
            height: 112px;
            margin-bottom: 10px;
            position: relative;
            display: flex;
            justify-content: space-between;
            &:nth-of-type(3) {
              margin-bottom: 0 !important;
            }
            img {
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 10px;
            }
            .subtitle {
              position: absolute;
              top: 15px;
              left: 15px;
              p {
                font-size: 16px;
                font-weight: bold;
                line-height: 10px;
                color: #260C70;
              }
              span {
                font-size: 12px;
                color: #260C70;
              }
            }
            .padvip{
              position: absolute;
              top: 0;
              right: 0;
              width: 44px;
              height: 44px;
            }
          }
        }
      }
      &.commodityType9 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        .rubiksCubeleft {
          width: 48%;
          .rubiksCubeTypeleft {
            // height: 173px;
            border-radius: 10px;
            margin-bottom: 10px;
            position: relative;
            &:nth-of-type(1) {
              height: 238px;
              .subtitle {
                position: absolute;
                top: 15px;
                left: 0;
                right: 0;
                p {
                  font-size: 16px;
                  font-weight: bold;
                  line-height: 10px;
                  color: #260C70;
                }
                span {
                  font-size: 12px;
                  color: #260C70;
                }
              }
              .videoss{
                position: absolute;
                top: 85px;
                left: 10%;
                // right: 0;
              }
            }
            &:nth-of-type(2) {
              height: 112px;
              margin-bottom: 0 !important;
              .subtitle {
                position: absolute;
                top: 15px;
                left: 15px;
                p {
                  font-size: 16px;
                  font-weight: bold;
                  line-height: 10px;
                  color: #260C70;
                }
                span {
                  font-size: 12px;
                  color: #260C70;
                }
              }
            }
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
            
            .padvip{
              position: absolute;
              top: 0;
              right: 0;
              width: 44px;
              height: 44px;
            }
          }
        }
        .rubiksCuberight {
          width: 48%;
          .rubiksCubeTyperight {
            height: 112px;
            margin-bottom: 10px;
            position: relative;
            display: flex;
            justify-content: space-between;
            &:nth-of-type(3) {
              margin-bottom: 0 !important;
            }
            img {
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 10px;
            }
            .subtitle {
              position: absolute;
              top: 15px;
              left: 15px;
              p {
                font-size: 16px;
                font-weight: bold;
                line-height: 10px;
                color: #260C70;
              }
              span {
                font-size: 12px;
                color: #260C70;
              }
            }
            .padvip{
              position: absolute;
              top: 0;
              right: 0;
              width: 44px;
              height: 44px;
            }
          }
        }
      }
    }
  }
}
</style>
